<template>
  <el-dialog title="选择商品" width="700px" :visible.sync="innerVisible" :close-on-click-modal="false" append-to-body>
    <el-form class="search" label-position="right">
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="商品类目：">
            <el-cascader v-model="fansParams.goodsCategoryId" :options="treeList" :props="{ value: 'id', label: 'name' }" @change="changeGoodsCategoryId" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品名称：">
            <el-input v-model="fansParams.name" />
          </el-form-item>
        </el-col>

        <el-col :span="8" class="mb15">
          <SearchButton :default-params="{}" @refreshParams="refreshFansList" @getList="getFansList" />
        </el-col>
      </el-row>
      <vxe-table
        ref="listTree"
        border
        resizable
        highlight-hover-row
        :auto-resize="true"
        :data="fansList"
        width
        max-height="300"
        :print-config="{}"
        row-id="openId"
        highlight-current-row
        text-algin="center"
        :radio-config="{highlight:true}"
        :checkbox-config="{checkRowKeys: checkList, checkStrictly: false}"
        @current-change="handleCurrentChange"
      >
        <vxe-table-column type="radio" width="60" />
        <vxe-table-column width="150" field="name" title="商品名" />
        <vxe-table-column width="150" field="price" title="价格">
          <template slot-scope="scope">
            {{ scope.row.price+'元' }}
          </template>
        </vxe-table-column>
        <vxe-table-column width="100" field="goodDesc" title="规格">
          <template slot-scope="scope">
            <el-button v-if="!scope.row.goodDesc" size="mini" type="text" @click="openSkuDialog(scope.row.id, scope.$rowIndex)">选择规格</el-button>
            <span v-else @click="openSkuDialog(scope.row.id, scope.$rowIndex)">{{ scope.row.goodDesc }}</span>
          </template>
        </vxe-table-column>
        <vxe-table-column width="100" field="saleStock" title="销量" />
        <vxe-table-column field="language" title="商品状态">
          <template slot-scope="scope">
            {{ scope.row.status==3?'已下架':'已上架' }}
          </template>
        </vxe-table-column>
      </vxe-table>
      <vxe-pager
        :current-page.sync="fansParams.pageNum"
        :page-size.sync="fansParams.pageSize"
        :total="fansTotal"
        :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
        @page-change="getFansList(fansParams.pageNum)"
      />
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="innerVisible = false">取 消</el-button>
      <!-- <el-dropdown style="margin: 0 0 0 10px" placement="bottom-start" @command="chooseFans"> -->
      <el-button type="primary" @click="chooseFans">
        确定
        <!-- <i class="el-icon-arrow-down el-icon--right" /> -->
      </el-button>
      <!-- <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :disabled="checkList.length === 0" command="1">选择选中的人</el-dropdown-item>
            <el-dropdown-item command="2">选择筛选出来的{{ fansTotal }}人</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
    </div>
  </el-dialog>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
</style>
